<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div.bannerMarquee
        {
            background-color: Gray; /*为了让div容器明显一点，所以弄个灰色背景色*/
            overflow: hidden; /*图片超过容器的话，就隐藏(必填)*/
            width: 400px; /*一张图片width:160px，此div一次呈现3张图片，所以宽度480px*/
            height: 557px; /*一张图片高度50px;*/
        }
        div.bannerMarquee ul
        {
            /*width: 960px; /*如果ul没设定width的话，预设依照容器div的宽，这样会让li自动断行以符合div容器范围，为了不让li自动断行*/ 
            /*ul的width可以设960px(Html画面上6张图)*/
            margin: 0px;
            padding: 0px; /* ul预设会有margin和padding，两者都设为0px*/
            list-style: none;
        }
        ul li
        {
            display: inline; /*让所有的li强制在同一列(水平)*/
            float: left; /*每个li靠左对齐才不会有间隔*/
        }
        img
        {
            border-width: 0px; /* 避免img受到超链接影响出现border，所以border-width: 0px;*/
            width: 400px;
            height: 557px;
        }
    </style>
</head>
<body>
    <div class="bannerMarquee">
        <ul>
            <li>
                <img src="01早餐篇.jpg" alt="" /></li>
            <li>
                <img src="02同桌篇.jpg" alt="" /></li>
            <li>
                <img src="03异类篇.jpg" alt="" /></li>
            <li>
                <img src="04外号篇.jpg" alt="" /></li>
            <li>
                <img src="05运动会篇.jpg" alt="" /></li>
            <li>
                <img src="06放学一起走明信片.jpg" alt="" /></li>
        </ul>
    </div>
    
</body> 
<script type="text/javascript" src="http://code.hs-cn.com/jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(init);
    var t;
    function init() {

        $("div.bannerMarquee ul li").mouseenter(MouseEnterHandler);
        $("div.bannerMarquee ul li").mouseleave(MouseLeaveHandler);
        t=setTimeout(myFunc,5000); //初始画面加载后，2秒后执行myFunc()
    }

    function myFunc() {


        //1. 先把第一个li对象复制一份暂存起来
        var $firstLi = $("div.bannerMarquee ul li").first().clone();
        //2. 把刚刚复制的li对象附加到最后一个li元素的后面
        $("div.bannerMarquee ul li").last().after($firstLi);
        //3. 移除掉第一个li对象

        //把第一个li对象先彻底隐藏后再移除掉
        $("div.bannerMarquee ul li").first().hide(500, function () {

            $(this).remove();
        });
     
       t=  setTimeout(myFunc, 2000); //每2秒钟执行myFunc()
    }
    function MouseEnterHandler() {
        clearTimeout(t);

    }

    function MouseLeaveHandler() {
    //鼠标离开图片2秒后，执行myFunc
        t = setTimeout(myFunc, 2000);
    }
    
</script>
</html>
